<html>
    <head>
        <title>路由</title>
    </head>
    <script>
        // 路由 
                // 一、官方路由
                          /*
                              对于大多数单页应用，都推荐使用官方支持的 vue-router库。

                              更多细节可以查看  vue-router文档： https://router.vuejs.org/
                          */


                // 二、从零开始简单的路由
                         /*
                             如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件：
                         */
                                const NotFund = {template:'<p>Page not found</p>'}
                                const Home = {template:'<p>home page</p>'}
                                const About ={template:'<p>about page</p>'}

                                const routes={
                                    '/':Home,
                                    '/about':About
                                }

                                new Vue({
                                    el:'#app',
                                    data:{
                                        currentRoute:window.location.pathname
                                    },
                                    computed:{
                                        ViewComponent(){
                                            return routes[this.currentRoute] || NotFund
                                        }
                                    },
                                    render(h){
                                        return h(this.ViewComponent)
                                    }
                                })


                         /*
                             结合HTML5 History API，你可以建立一个麻雀虽小但是武藏俱全的客户端路由。

                             可以直接看实例应用： https://github.com/chrisvfritz/vue-2.0-simple-routing-example
                         */

                // 三、整合第三方路由
                         /*
                            如果你有更偏爱的第三方路由，如 Page.js  或者  Director   ，整合起来也一样简单。

                            这里有个使用了Page.js的完整示例:   https://github.com/chrisvfritz/vue-2.0-simple-routing-example/tree/pagejs
                         */
    </script>
</html>